<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Basic Template</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
        <div class="callout large primary">
            <article class="grid-container">
                <div class="grid-x">
                    <div class="cell medium-8">
                        <h2>Callista</h2>
                        <p class="subheader">Derived by the Greek name of a huntress</p>
                    </div>
                    <div class="cell medium-4">
                        <form action="">
                            <div class="input-group">
                                <span class="input-group-label fi-magnifying-glass"></span>
                                <input type="text" class="input-group-field" placeholder="What Galaxy?">
                                <div class="input-group-button">
                                    <input type="submit" value="Submit" class="button">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </article>
            <br>
            <div class="menu">
                <li><a href="#">Draco</a></li>
                <li><a href="#">Astra</a></li>
                <li><a href="#">Cygnus</a></li>
                <li><a href="#">Aquila</a></li>
                <li><a href="#">Lynx</a></li>
            </div>
        </div>
        <article class="grid-container">
            <div class="grid-x grid-margin-y">
                <div class="cell medium-4 callout secondary">
                    <h1>The sky is the daily bread of the eyes.</h1>
                    <p class="lead">The contemplation of celestial things will make a man both speak and think more
                        sublimely and magnificently when he descends to human affairs.</p>
                    <a href="foo" class="align-right">Learn more &raquo;</a>
                </div>
                <div class="cell medium-8">
                    <img src="https://placehold.it/800x440" alt="image of stars">
                </div>
            </div>
            <div class="grid-x grid-margin-y">
                <div class="cell medium-6">
                    <h3>fhrehffef rfjef</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores possimus laborum similique
                        molestias! Dolores adipisci debitis est, mollitia reiciendis? Consequatur quas excepturi, quasi
                        labore veniam quisquam voluptate ad odio deserunt!</p>
                </div>
                <div class="cell medium-6">
                    <img src="https://placehold.it/100" class="thumbnail" alt="">
                    <img src="https://placehold.it/100" class="thumbnail" alt="">
                    <img src="https://placehold.it/100" class="thumbnail" alt="">
                    <p><a href="foo">View image gallery</a></p>
                </div>
            </div>
            <hr>
        </article>

        <script src="node_modules/jquery/dist/jquery.js"></script>
        <script src="node_modules/what-input/dist/what-input.js"></script>
        <script src="node_modules/foundation-sites/dist/js/foundation.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>
